<!-- 可以给设备分设备组 -->
<script setup>
import { reactive, ref } from 'vue';
import UnitByPosition from '@T2/views/Project/Manage/components/tree/unitByPosition.vue';
import DeviceList from './deviceList.vue';
import Devicegroup from './pages/devicegroup.vue';

const Resd = reactive({
  showUnitSelect: false,
  pageStr: '',
  devicegroupIf: false,
  deviceListPageUpdate: 0,
});
const unitlistChange = (data) => {
  Resd.showUnitSelect = data.length > 1 ? true : false;
}
const currentUnit = ref(null);
const unitChange = (data, node) => {
  currentUnit.value = data;
  Resd.devicegroupIf = false;
}

const pagesChange = (toPage) => {
  if (toPage === 'devicegroup') {
    Resd.devicegroupIf = true;
  } else {
    Resd.deviceListPageUpdate++;
  }
  Resd.pageStr = toPage;
}
</script>

<template>
  <div class="view flex" v-show="!Resd.pageStr">
    <div class="position" v-show="Resd.showUnitSelect">
      <UnitByPosition @current-change="unitChange" @unitlist-change="unitlistChange"/>
    </div>
    <div class="right-container flex-column">
      <div class="unitinfo-card flex-column" v-if="currentUnit">
        <div class="unit-header flex--center">
          <label>{{ currentUnit.name }}</label>
          <span>新建/改造年份：{{ currentUnit.year }}</span>
        </div>
        <div class="info-grid">
          <div class="unit-info-item flex--center">
            <label>站点地址：</label>
            <p class="ellipsis" style="flex: 1;">
              <span>{{ currentUnit.addr }}</span>
            </p>
          </div>
          <div class="unit-info-item flex--center">
            <label>站点位置：</label>
            <span>{{ currentUnit.wz }}</span>
          </div>
          <div class="unit-info-item flex--center">
            <label>经纬度：</label>
            <span>{{ currentUnit.x }},{{ currentUnit.y }}</span>
          </div>
          <div class="unit-info-item flex--center">
            <label>负责人：</label>
            <span>{{ currentUnit.fzr }}</span>
          </div>
          <div class="unit-info-item flex--center">
            <label>联系电话：</label>
            <span>{{ currentUnit.phone }}</span>
          </div>
        </div>
      </div>
      <DeviceList
        v-if="currentUnit"
        :unit="currentUnit"
        :update="Resd.deviceListPageUpdate"
        @pages-change="pagesChange"
      />
    </div>
  </div>
  
  <div class="view" v-if="Resd.devicegroupIf" v-show="Resd.pageStr === 'devicegroup'">
    <Devicegroup :unit="currentUnit" @pages-change="pagesChange" v-if="currentUnit" />
  </div>
</template>

<style lang="scss" scoped>
.view {
  width: 100%;
  height: 100%;
}
.position {
  width: fit-content;
  height: calc(100% - 20px);
  background: #FFFFFF;
  box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.15);
  border-radius: 10px;
  margin: 10px;
}
.right-container {
  flex: 1;
  overflow: hidden;
}
.unitinfo-card {
  background-color: #FFFFFF;
  margin: 10px 10px 0;
  padding: 20px 12px;
  .unit-header {
    font-weight: 400;
    font-size: 12px;
    color: #888888;
    label {
      font-weight: 600;
      font-size: 18px;
      color: #111111;
      position: relative;
      padding-left: 8px;
      margin-right: 8px;
      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 3px;
        height: 16px;
        background: linear-gradient( 180deg, #0648D2 0%, #3F92FA 100%);
      }
    }
  }
  .info-grid {
    margin-top: 16px;
    padding-bottom: 16px;
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid #ECECEC;
    .unit-info-item {
      color: #111111;
      label {
        font-weight: 400;
        font-size: 14px;
        color: #888888;
        width: 70px;
        text-align: right;
      }
    }
  }
}
</style>